<template>
  <Card title="队列统计信息" :body-style="{ padding: '12px' }">
    <div ref="chartRef" class="w-full h-48"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { echartsPublicOptions } from './echartsSetting';
  import { Card } from 'ant-design-vue';

  const props = defineProps({
    chartData: {
      type: Object,
      require: true,
    },
    dateKey: {
      type: String,
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  // echarts数据处理
  const tansform = (list: Array<any>) => {
    let result: Array<any> = [];
    list.forEach((item: object) => {
      result.push(Object.values(item) as Array<any>);
    });
    return result;
  };
  watch(
    () => props.chartData,
    (nVal: any) => {
      getInstance()?.showLoading();
      let legendData: string[] = [];
      let series: any[] = [];
      nVal.forEach((item: Recordable) => {
        legendData.push(item.name + '永久性故障');
        series.push({
          name: item.name + '永久性故障',
          data: tansform(item.value.failedMsgs),
          symbolSize: 1,
          symbol: 'circle',
          type: 'line',
          stack: 'x',
          barMaxWidth: 30,
        });
        legendData.push(item.name + '成功');
        series.push({
          name: item.name + '成功',
          data: tansform(item.value.successfulMsgs),
          symbolSize: 1,
          symbol: 'circle',
          type: 'line',
          stack: 'x',
          barMaxWidth: 30,
        });
        legendData.push(item.name + '处理失败');
        series.push({
          name: item.name + '处理失败',
          data: tansform(item.value.tmpFailed),
          symbolSize: 1,
          symbol: 'circle',
          type: 'line',
          stack: 'x',
          barMaxWidth: 30,
        });
      });
      setOptions({
        ...echartsPublicOptions(props.dateKey),
        legend: {
          type: 'scroll',
          left: 10,
          data: legendData,
          tooltip: {
            show: true,
          },
        },
        series,
      });
      getInstance()?.hideLoading();
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>
